<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/konva.js"></script>
  <title>Title</title>
  <style>
      #container {
          border: 1px solid black;
          width: 300px;
          height: 300px;
      }
  </style>
</head>
<body>
<!-- div中放入canvas -->
<div id="container"></div>
<script>
  /* Konva */
  // Stage(舞台)  一个canvas对应一个stage
  // Layer(图层)  stage下可以有多个layer
  // Group(组)   layer和group下可以有多个group
  // Shape(图形)  layer和group下可以有多个shape

  // 1、创建一个舞台
  const stage = new Konva.Stage({
    // 指定canvas的容器，默认是id，`#`开头是id，`.`开头是class
    container: 'container',
    // canvas宽
    width: 300,
    // canvas高
    height: 300
  });
  // 2、创建图层
  const layer = new Konva.Layer();
  // 3、图层添加进舞台
  stage.add(layer);
  // 4、创建图形(圆)
  const circle = new Konva.Circle({
    // 圆的x
    x: stage.width() / 2,
    // 圆的y
    y: stage.height() / 2,
    // 半径
    radius: 70,
    // 填充颜色
    fill: 'red',
    // 轮廓颜色
    stroke: 'black',
    // 轮廓宽度
    strokeWidth: 4
  });
  // 5、图形添加进图层
  layer.add(circle);
</script>
</body>
</html>
